<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('競猜')}}</view>
			<view class="rule" data-url="/pages/index/ruleV?type=game3_rule" @click="gotopage">{{Lang.lang('規則')}}
			</view>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="round_box">
				<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
			</view>



			<block v-for="(item, index) in log_list" :key="index">
				<view class="gameplay_content">
					<view class="gameplay_auto">
						<view class="gameplay_text">
							<view class="title">{{Lang.lang('競猜')}}：
								<span v-if="lang=='tc'">{{prizeList[item.betting_type-1].name_tc}} </span>
								<span v-if="lang=='en'">{{prizeList[item.betting_type-1].name_en}} </span>
								—
								{{game_list[item.venue-1].title_name}}
							</view>
							<view class="text">{{item.add_time}}</view>
						</view>

						<view class="gameplay_img" v-if="item.is_zj == 1">
							<image v-if="lang=='tc'" src="../../static/game/game3_s_1_tc.png" mode="widthFix"></image>
							<image v-if="lang=='en'" src="../../static/game/game3_s_1_en.png" mode="widthFix"></image>
						</view>
						<view class="gameplay_img" v-if="item.is_zj == 2">
							<image v-if="lang=='tc'" src="../../static/game/game3_s_2_tc.png" mode="widthFix"></image>
							<image v-if="lang=='en'" src="../../static/game/game3_s_2_en.png" mode="widthFix"></image>
						</view>
						<view class="gameplay_img" v-if="item.is_zj == 3">
							<image v-if="lang=='tc'" src="../../static/game/game3_s_3_tc.png" mode="widthFix"></image>
							<image v-if="lang=='en'" src="../../static/game/game3_s_3_en.png" mode="widthFix"></image>
						</view>

					</view>
					<view class="rule">{{Lang.lang('您已投入')}}： <span>{{item.participation_amount}}</span></view>
					<!-- <view class="text">註：如果中獎，需支付<span>10积分</span>作為手續費</view> -->
				</view>
			</block>



			<!-- <view class="gameplay_content">
				<view class="gameplay_auto">
					<view class="gameplay_text">
						<view class="title">競猜：南 — 乾級</view>
						<view class="text">2024.06.13 14:00:00</view>
					</view>
					<view class="gameplay_img">
						<image src="../../static/bg08.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="rule">您已投入： <span>100</span>YYDM競猜南，請等待開獎</view>
				<view class="text">註：如果中獎，需支付<span>10积分</span>作為手續費</view>
			</view>

			<view class="gameplay_content">
				<view class="gameplay_auto">
					<view class="gameplay_text">
						<view class="title">競猜：南 — 乾級</view>
						<view class="text">2024.06.13 14:00:00</view>
					</view>
					<view class="gameplay_img">
						<image src="../../static/bg09.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="rule">您已投入： <span>100</span>YYDM競猜南，請等待開獎</view>
				<view class="text">註：如果中獎，需支付<span>10积分</span>作為手續費</view>
			</view> -->

		</view>

		<!-- 弹窗 -->
		<view class="pupu_box pupu_box02" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<view class="pupu_title">{{Lang.lang('選擇級別')}}</view>
				<view class="pupu_value">
					<!-- 期数 -->
					<view class="pupu_content">

						<view class="pupu_period">
							<block v-for="(item, index) in game_list" :key="index">
								<view class="period" :class="index == select ? 'periodColor' : ''">

									<view :data-index="index" @tap="setPeriod" v-if="item.is_betting == 1">
										{{item.title_name}}
									</view>

									<view :data-index="index" v-if="item.is_betting == 0" style="color:#666">
										{{item.title_name}}
									</view>

								</view>
							</block>
						</view>
						<view class="page_title">
							<view class="title">{{Lang.lang('支付金額')}}</view>

						</view>
						<view class="personal_list">
							<view class="title">YYDZ</view>
							<input placeholder-style="color: #A5A7AD" disabled v-model="num" />
						</view>
						<view class="pupu_menu" @click="autoPupu">{{Lang.lang('確定')}}</view>

					</view>

				</view>
			</view>
		</view>

		<view class="none" v-if="log_list.length == 0">
			<image  v-if="lang=='tc'" src="../../static/none_tc.png" mode="widthFix"></image>
			<image  v-if="lang=='en'" src="../../static/none_en.png" mode="widthFix"></image>
		</view>


		<!-- 输入安全码 -->
		<view class="pupu_box" v-if="pupu1" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">{{Lang.lang('請輸入交易密碼')}}</view>
				<view class="input">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">{{Lang.lang('取消')}}</view>
					<view class="menu" @click="joinGameThree">{{Lang.lang('確定')}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				pupu1: false,
				direction: '',
				scrrol: false,
				info: '',
				num: 0,
				page: 0,
				pay_password: '',
				// 奖品列表，
				prizeList: [{
						id: '1',
						name_tc: '东',
						name_en: 'east',
					},
					{
						id: '2',
						name_tc: '南',
						name_en: 'south',
					},
					{
						id: '3',
						name_tc: '西',
						name_en: 'west',
					},
					{
						id: '4',
						name_tc: '北',
						name_en: 'north',

					},
					{
						id: '5',
						name_tc: '东北',
						name_en: 'northeast',
					},
					{
						id: '6',
						name_tc: '西北',
						name_en: 'northwest',
					},
					{
						id: '7',
						name_tc: '东南',
						name_en: 'southeast',

					},
					{
						id: '8',
						name_tc: '西南',
						name_en: 'southwest',

					},
				],
				select: 0,
				selectValue: '',
				game_list: [],
				log_list: [],
				is_day_betting: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			that.lang = uni.getStorageSync('_language');
			that.loadData()
			uni.$on('mySelect', function(data) {

				// if (that.is_day_betting == 1) {
				// 	that.Msg.Fail('今日已下注');
				// 	return;
				// }
				that.direction = data.id;
				that.pupu = data.pupu;
				// uni.$off('mySelect');

			})



		},
		methods: {
			setPeriod(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				let name = that.game_list[index].title_name;
				// that.selectValue = that.direction + '-' + name;
				console.log(that.selectValue)

				that.num = that.game_list[that.select].participation_amount;

			},
			closePupu() {
				let that = this;
				that.direction = '';
				that.pupu = false;
			},
			loadData() {
				let that = this;
				that.page = 0;
				that.log_list = [];
				that.loadPageData();
			},
			loadPageData() {
				let that = this;
				that.page++;
				that.Net._post('api/game/gameThreeIndex', {
					page: that.page
				}, res => {
					if (res.code == 200) {
						that.game_list = res.data.game_list
						that.num = that.game_list[that.select].participation_amount;
						that.is_day_betting = res.data.is_day_betting
						that.log_list = that.log_list.concat(res.data.log_list); //将数据拼接在一起
						//console.log(res);

					}
				});
			},
			joinGameThree() {
				let that = this;
				that.Net._post('api/game/joinGameThree', {
					pay_password: that.pay_password,
					venue: parseInt(that.select) + 1,
					betting_type: that.direction
				}, res => {
					if (res.code == 200) {
						that.pupu1 = false
						that.pupu = false
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.loadData()
						}, 500)

					}
				});
			},
			autoPupu() {
				let that = this;
				that.pay_password = '';
				that.pupu1 = !that.pupu1;
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			let that = this;
			that.loadPageData()
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.round_box {
		width: 100%;
		height: 40vh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.pupu_box .pupu_show {
		width: 100%;
		background-color: #2A2A2A;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}

	.pupu_box .pupu_show .pupu_title {
		font-size: 4.5vw;
		color: #fff;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}

	.pupu_box .pupu_show .close {
		font-size: 4vw;
		color: #fff;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}

	.pupu_box .pupu_show .pupu_value {
		max-height: 70vh;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;

	}

	.pupu_content {
		width: 100%;
		height: 100%;
	}

	.pupu_menu {
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #CFA46B;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 8vw;
		font-weight: bold;

	}

	.pupu_period {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pupu_period::after {
		flex: auto;
		content: '';

	}

	.pupu_period .period {
		height: 12vw;
		line-height: 12vw;
		width: 19%;
		text-align: center;
		border-radius: 2vw;
		background-color: #1A1A1A;
		font-size: 3.8vw;
		margin-left: 1%;
		margin-bottom: 1%;
		color: #fff;
		font-weight: bold;
		box-sizing: border-box;
	}

	.pupu_period .period:nth-last-child(1) {
		width: 32.33333%;
	}

	.pupu_period .period:nth-last-child(2) {
		width: 32.33333%;
	}

	.pupu_period .period:nth-last-child(3) {
		width: 32.33333%;
	}


	.periodColor {
		color: #fff !important;
		background-color: #CFA46B !important;
	}

	.schedule_box {
		width: 100%;
	}

	.schedule_list {
		width: 100%;
		display: flex;
		position: relative;
	}

	.schedule_list .name_box {
		width: 20vw;
		min-height: 18vw;
	}

	.schedule_list .name_box .name {
		font-size: 4.3vw;
		color: #333;
		line-height: 6vw;
		font-weight: bold;
		text-align: center;
	}

	.schedule_list .name_box .time {
		font-size: 3.4vw;
		color: #808080;
		text-align: center;
	}

	.schedule_list .line_box {
		height: 100%;
		width: 5vw;
		position: absolute;
		left: 20vw;
		top: 0;
	}

	.schedule_list .line_box .round {
		margin: 0 auto;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 1vw;
		border: 1vw solid #FC5D20;
		width: 4vw;
		height: 4vw;
	}

	.schedule_list .line_box .close {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 auto;
		background-color: #E9E9E9;
		margin-top: 1vw;
		color: transparent;
		border-radius: 50%;
	}

	.schedule_list .line_box .line {
		width: 1px;
		margin: 0 auto;
		height: calc(100% - 1.25vw);
		background-color: #CBCBCB;
	}


	.schedule_box .schedule_list:last-child .line_box .line {
		display: none;
	}

	.schedule_list .text_box {
		flex: 1;
		min-height: 18vw;
		padding-left: 8vw;
	}

	.schedule_list .text_box .title {
		font-size: 3.6vw;
		color: #C0C0C0;
		margin-bottom: 1vw;
	}

	.schedule_list .text_box .value {
		font-size: 4.3vw;
		color: #333;
		line-height: 6vw;
		font-weight: bold;
	}


	.schedule_list .text_box .rule {
		font-size: 3.3vw;
		color: #FF4246;
		margin-top: 1vw;
	}

	.schedule_list .text_box .time {
		font-size: 3.4vw;
		color: #808080;
		margin-top: 1vw;
	}


	.schedule_box .schedule_list:last-child .text_box {
		min-height: auto;
	}

	.bank_list {
		width: 100%;
		display: flex;
		align-items: center;
		height: 15vw;
	}

	.bank_list .icon {
		width: 7vw;
		margin-right: 3vw;
	}

	.bank_list .icon image {
		width: 100%;
	}

	.bank_list .text {
		flex: 1;
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}

	.bank_list .tick {
		font-size: 6vw;
		color: transparent;
	}

	.bank_list .arrow {
		font-size: 4vw;
		color: #A5A7AD;
	}

	.tickColor {
		color: #FC5D20 !important;
	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}

	.personal_list {
		width: 100%;
		height: 50px;
		margin: 3vw auto 0vw;
		padding: 0vw 3vw;
		display: flex;
		background-color: #F9F9F9;
		border-radius: 2vw;
		position: relative;
	}

	.personal_list .title {
		height: 50px;
		line-height: 50px;
		font-size: 3.5vw;
		color: #000;
		margin-right: 10px;
		width: 25%;
	}

	.personal_list input {
		height: 50px;
		line-height: 50px;
		font-size: 3.5vw;
		color: #000;
		width: calc(100% - 150px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.personal_list .yzm {
		text-align: right;
		line-height: 30px;
		height: 30px;
		font-size: 3.5vw;
		color: #fff;
		background-color: #0084FF;
		border-radius: 10px;
		overflow: hidden;
		padding: 0vw 2vw;
		margin-top: 3vw;
	}

	.yzm1 {
		line-height: 50px;
		height: 50px;
		font-size: 12px;
		color: gray;
	}

	.none {
		width: 100%;
		text-align: center;
		margin-top: 5vw;
	}

	.none image {
		width: 40%;
	}

	.gameplay_content {
		widows: 100%;
		background-color: #1A1A1A;
		margin-top: 4%;
		padding: 5vw 4vw;
		border-radius: 3vw;
	}

	.gameplay_auto {
		width: 100%;
		display: flex;
	}

	.gameplay_auto .gameplay_text {
		flex: 1;
	}

	.gameplay_auto .gameplay_img {
		width: 18vw;
		margin-left: 3vw;
	}

	.gameplay_auto .gameplay_img image {
		width: 100%;
	}


	.gameplay_content .title {
		font-size: 5vw;
		color: #fff;
		font-weight: bold;
	}

	.gameplay_content .text {
		font-size: 3.5vw;
		color: #999;
		margin-top: 3vw;
	}

	.gameplay_content .text span {
		color: #E92857;
	}

	.gameplay_content .rule {
		font-size: 3.5vw;
		color: #999;
		background-color: #0B0B11;
		padding: 3vw 4vw;
		border-radius: 2vw;
	}

	.gameplay_content .rule span {
		color: #E92857;
	}

	.range_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
		position: relative;
	}

	.range_box .menu {
		flex: 1;
		height: 15vw;

		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vw;
		color: #fff;
		font-weight: bold;
		background-color: #333333;
	}

	.range_box .menu:nth-child(1) {
		border-radius: 15vw 0vw 0vw 15vw;
	}

	.range_box .menu:nth-child(2) {
		border-radius: 0 15vw 15vw 0;

	}

	.range_box .line {
		width: 3vw;
		background-color: #1A1A1A;
		height: 100%;
		position: absolute;
		left: calc(50% - 1.5vw);
		top: 0;
		transform: skewX(-10deg);
		/* 沿着X轴倾斜30度 */
		transform-origin: right;
		/* 设置变形的原点在右边 */
	}

	.gameplay_content .menu_box {
		width: 100%;
		margin-top: 4vw;
		display: flex;
		align-items: center;
	}

	.gameplay_content .menu_box .menu {
		width: 22vw;
		height: 10vw;
		border-radius: 10vw;
		color: #fff;
		background-color: #FF295E;
		font-size: 3.6vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 4%;
	}

	.gameplay_content .menu_box .reset {
		width: 15vw;
		height: 10vw;
		border-radius: 2vw;
		color: #fff;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 4%;
		border: 1px solid #333333;
	}

	.gameplay_content .menu_box .num_box {
		flex: 1;
		height: 10vw;
		border: 1px solid #333333;
		border-radius: 2vw;
		display: flex;
		align-items: center;
	}

	.gameplay_content .menu_box .num_box .down {
		font-size: 4vw;
		color: #fff;
		width: 10vw;
		height: 10vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gameplay_content .menu_box .num_box .up {
		font-size: 4vw;
		color: #fff;
		width: 10vw;
		height: 10vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gameplay_content .menu_box .num_box .num {
		flex: 1;
		height: 100%;
		border-left: 1px solid #333;
		border-right: 1px solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 1vw;
	}

	.gameplay_content .menu_box .num_box .num input {
		flex: 1;
		margin-right: 2vw;
		text-align: right;
		color: #fff;
		font-size: 3.5vw;
	}

	.gameplay_content .menu_box .num_box .num .t {
		font-size: 3vw;
		color: #999999;
	}


	/*  */
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box02 {
		align-items: flex-end !important;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}

	/*  */
</style>